* {margin: 0; padding: 0; box-sizing: border-box;}

html {font-size: calc(100vw/7.5); width: 100%; height: 100%; position: fixed; top:0; left:0;}
body {touch-action: none; overflow-x: hidden; background-color: #080422;}
*:focus { outline: none; }

img {display: block;}
.flex {display: -webkit-flex; display: flex;}
.flex.items-center {align-items: center;}

.pop-bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(14,20,55,.85); display: none;}
.pop-bg.game {z-index: 989;}
.pop-bg .share-box {position: absolute; width: 100%; left: 0; top: .3rem; display: none;}
.pop-bg .pop-box {position: absolute; width: 6.36rem; height: 9.41rem; background-image: url("../img/pop_box_bg.png"); background-size: 100%; background-repeat: no-repeat; left: .57rem; top: .61rem; display: none;}
.pop-bg .pop-box.game {width: 5.16rem; height: 5.26rem; left: 1.17rem; background-image: url("../img/pop_box_bg_game.png"); background-size: 100%; background-repeat: no-repeat; top: 3.32rem; -webkit-transform: scale(1.2); transform: scale(1.2);}
.pop-bg .pop-box .pop-title {height: .54rem; line-height: .54rem; text-align: center; color: #19fdff; font-size: .26rem; font-weight: bolder; font-style: italic; padding-top: .03rem;}
.pop-bg .pop-box .pop-content {padding: .3rem .25rem; height: 8.6rem; overflow: auto;}
.pop-bg .pop-box .pop-content table {margin: .1rem 0;}
.pop-bg .pop-box .pop-content table tr td,.pop-bg .pop-box .pop-content table tr th {color: #19fdff; font-size: .24rem; line-height: .37rem; text-align: left; border: #19fdff 1px solid; padding-left: .2rem;}
.pop-bg .pop-box.game .pop-content {height: auto;}
.pop-bg .pop-box.game .pop-content p {line-height: .46rem;}
.pop-bg .pop-box.game .pop-content.game-info p {padding-left: .7rem;}
.pop-bg .pop-box.game .pop-content.game-info p > img {width: .8rem; margin-left: -.7rem; margin-top: -.3rem; position: absolute;}
.pop-bg .pop-box .pop-content p {color: #19fdff; font-size: .24rem; line-height: .37rem;}
.pop-bg .pop-box .pop-content p.title {font-weight: bolder;}
.pop-bg .pop-box .pop-close {position: absolute; width: 2rem; bottom: -.4rem; left: 50%; margin-left: -1rem;}
.pop-bg .pop-box .pop-btn-box {justify-content: space-between; padding: 0 .4rem; position: absolute; width: 100%; left: 0; bottom: .4rem;}
.pop-bg .pop-box .pop-btn-box img {width: 2rem; height: .62rem;}
.pop-bg .pop-box .pop-content.over {text-align: center; margin-bottom: .5rem;}
.pop-bg .pop-box .pop-content.over .win {width: 3.25rem; display: inline-block;}
.pop-bg .pop-box .pop-content.over .lost {width: 2.41rem; display: inline-block; margin: .6rem 0;}
.pop-bg .pop-box .pop-content.over .score-box {font-size: .24rem; color: #19fdff; font-style: italic; margin: .3rem 0;}
.pop-bg .pop-box .pop-content.over .score-box span {font-size: .78rem;}
.pop-bg .pop-box .play-again {position: absolute; width: 2rem; bottom: -.35rem; left: 50%; margin-left: -1rem;}
.pop-bg .pop-box .text-center {text-align: center;}
.pop-bg .pop-box .text-center p.title {font-size: 0.4rem; margin: 0.6rem 0 0.3rem 0;}
.pop-bg .pop-box .text-center img.btn-into-prize { width: 2.5rem; display: inline-block;}
.pop-bg .pop-box .text-center img.address-info {width: 2.9rem; display: inline-block;}
.pop-bg .pop-box .text-center .input-text {background: #fff; width: 5.9rem; height: 0.7rem; padding: 0.1rem 0.2rem; border-radius: 0.1rem; margin-bottom: 0.2rem; position: relative;}
.pop-bg .pop-box .text-center .input-text input[type=text] {display: block; width: 100%; height: 0.5rem; line-height: 0.5rem; border:none;}
.pop-bg .pop-box .text-center .input-text button {position: absolute; top: 0.02rem; right: 0.02rem; width: 2rem; height: 0.66rem; background: #02c2ff; color: #fff; border: none; border-radius: 0 0.08rem 0.08rem 0; z-index: 2;}
.pop-bg .pop-box .text-center .input-select {width: 5.9rem; height: 0.7rem; margin-bottom: 0.2rem;}
.pop-bg .pop-box .text-center .input-select .select-box {width: 2.8rem; height: 0.7rem; float: left; background: #fff; padding: 0.1rem 0.2rem; border-radius: 0.1rem; margin-bottom: 0.2rem; position: relative;}
.pop-bg .pop-box .text-center .input-select .select-box:last-child {float: right;}
.pop-bg .pop-box .text-center .input-select .select-box select {width: 2.8rem; height: 0.7rem; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0;}
.pop-bg .pop-box .text-center .input-select .select-box input[type=text] {display: block; width: 100%; height: 0.5rem; line-height: 0.5rem; border:none; background: url("../img/jt.png") right center no-repeat; background-size: 0.28rem;}


.page {min-height: 100vh;}
.page.index {background-image: url("../img/index_bg.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: left bottom; padding-top: .6rem;}
.page.rank {background-image: url("../img/rank_bg.jpg"); background-color: #1a1938; background-size: 100%; background-repeat: no-repeat; background-position: left bottom; position: absolute; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9999; display: none;}
.page.game {background-image: url("../img/game_bg.jpg"); background-size: 100%; background-repeat: no-repeat; position: absolute; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9; display: none;}
.page .index-runman {margin-top: -.5rem;}
.page .index-bottom-box {position: absolute; width: 100%; left: 0; bottom: 1rem;}
.page .index-set-out {margin-top: .5rem; width: 100%; height: .96rem; background-image: url("../img/index_set_out.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-set-prize {margin-top: .5rem; width: 100%; height: .76rem; background-image: url("../img/index_set_prize.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-btn-box {height: .93rem; padding: 0 .5rem; background-image: url("../img/index_btn_box.png"); background-size: 100%; background-repeat: no-repeat; justify-content: space-around; align-items: center; margin-top: .5rem;}
.page .index-btn-box > .rank-btn {width: 1.71rem; height: .63rem; background-image: url("../img/index_btn_rank.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-btn-box > .share {width: 2.5rem; height: .63rem; background-image: url("../img/index_btn_share.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-btn-box > .gift {width: 2.5rem; height: .63rem; background-image: url("../img/index_btn_gift.png"); background-size: 100%; background-repeat: no-repeat;}
.page .rank-cont {width: 7.2rem; height: 10.18rem; background-image: url("../img/rank_box_bg.png"); background-size: 100%; background-repeat: no-repeat; position: absolute; left: .15rem; top: .4rem;}
.page .rank-cont .rank-box {padding: 1.2rem .65rem .35rem .85rem; width: 7.2rem; height: 10.18rem;}
.page .rank-cont .rank-box .rank-list-box {width: 100%; height: 6.8rem; overflow: auto;}
.page .rank-cont .rank-box .rank-list {display: -webkit-flex; display: flex; align-items: center; padding: .18rem 0; border-bottom: #075879 1px dashed;}
.page .rank-cont .rank-box .rank-list.my {background-image: url("../img/rank_mybox_bg.jpg"); background-size: 100%; background-repeat: no-repeat; padding-right: .2rem;}
.page .rank-cont .rank-box .rank-list > img {width: .31rem; margin-left: .15rem;}
.page .rank-cont .rank-box .rank-list > .rank-user-number {width: .31rem; margin-left: .15rem; text-align: center; color: #19fdff; font-size: .28rem; font-weight: bold; font-style: italic;}
.page .rank-cont .rank-box .rank-list > .rank-user-box {width: .92rem; height: .92rem; border: #4ad3ff 1px solid; box-shadow: 0 0 .1rem rgba(71,211,255,.4); margin-left: .3rem;}
.page .rank-cont .rank-box .rank-list > .rank-user-box img {width: 100%; height: 100%;}
.page .rank-cont .rank-box .rank-list > .rank-user-name {color: #f2f2f2; font-size: .28rem; font-weight: bold; font-style: italic; height: .8rem; margin-left: .27rem; width: 2rem;}
.page .rank-cont .rank-box .rank-list > .rank-user-score {flex: 1; text-align: right; color: #19fdff; font-size: .24rem; font-style: italic; padding-top: .5rem;}
.page .rank-cont .rank-box .rank-list > .rank-user-score span {font-size: .38rem;}
.page .rank-cont .rank-close {position: absolute; width: 2rem; top: 9.86rem; right: 1.68rem;}
.page .game-box {position: absolute; width: 100%; height: 8.47rem; background-image: url("../img/game_road_img.png"); background-size: 100%; background-repeat: no-repeat; left: 0; bottom: 0; overflow: hidden;}
.page .game-life-box {position: absolute; width: 1.8rem; height: .55rem; background-image: url("../img/game_life_box.png"); background-size: 100%; background-repeat: no-repeat; left: .2rem; top: .32rem; padding-left: .7rem; color: #28cde1; font-size: .26rem; line-height: .55rem;}
.page .game-life-box span {font-size: .4rem; font-weight: bold; margin-left: .2rem;}
.page .game-life-box > img {width: .24rem; height: .63rem; margin-top: -.12rem; margin-right: .15rem;}
.page .game-score-box {width: 2rem; height: .55rem; line-height: .5rem; background-image: url("../img/game_score_box.png"); background-size: 100%; background-repeat: no-repeat; text-align: center; color: #28cde1; font-size: .26rem; font-weight: bold; font-style: italic; position: absolute; top: .32rem; left: 2.75rem; padding-right: .35rem;}
.page .game-title {position: absolute; width: 100%; left: 0; top: 1.21rem;}
.page .game-box .person {position: absolute; width: 2.71rem; height: 6.11rem; background-image: url("../img/runing_man.gif"); background-size: 100%; background-repeat: no-repeat; left: 50%; margin-left: -1.27rem; bottom: 0; z-index: 9;}
.page .game-box .person .protection {width: 3.3rem; position: absolute; left: -.35rem; bottom: 0; display: none;}
.page .game-box .person .person-hit-area {position: absolute; width: 50%; left: 25%; height: 2rem; bottom: 0;}
.page .game-box .road-sign-box > img:nth-child(2) {-webkit-animation-delay: 500ms; animation-delay: 500ms;}
.page .game-box .road-sign-box > img:nth-child(3) {-webkit-animation-delay: 1000ms; animation-delay: 1000ms;}
.page .game-box .road-sign-box > img:nth-child(4) {-webkit-animation-delay: 1500ms; animation-delay: 1500ms;}
.page .game-box .road-sign-box > img:nth-child(5) {-webkit-animation-delay: 2000ms; animation-delay: 2000ms;}
.page .game-box .road-sign-left {position: absolute; width: 1rem; top: -7%; left: 42%; transform: scale(0) rotate(13deg);}
.page .game-box .road-sign-right {position: absolute; width: 1rem; top: -7%; left: 46%; transform: scale(0) rotate(-13deg);}
.page .game-box .game-item {position: absolute; width: 0.1rem; top: 5%;}
.page .game-box .game-item.blue,
.page .game-box .game-item.black {width: 0.5rem;}
.page .game-box .game-item.left {left: 45%;}
.page .game-box .game-item.middle {left: 50%;}
.page .game-box .game-item.right {left: 53%;}
.page .game-box .game-item.left.blue,
.page .game-box .game-item.left.black {left: 42%;}
.page .game-box .game-item.middle.blue,
.page .game-box .game-item.middle.black {left: 47%;}
.page .game-box .game-item.right.blue,
.page .game-box .game-item.right.black {left: 52%;}
.page .game-message {position: absolute; width: 100%; left: 0; bottom: 6rem; display: none;}
.page .game-left-btn {position: absolute; width: 1.6rem; height: 1.3rem; background-image: url("../img/game_left_btn.png"); background-size: 100%; background-repeat: no-repeat; left: .1rem; bottom: 5.7rem; z-index: 9;}
.page .game-right-btn {position: absolute; width: 1.6rem; height: 1.3rem; background-image: url("../img/game_right_btn.png"); background-size: 100%; background-repeat: no-repeat; right: .1rem; bottom: 5.7rem; z-index: 9;}

